
// 动画执行
@mixin animationForwards($keyframesName, $time: 1s) {
    animation: $keyframesName $time linear forwards;
    -moz-animation: $keyframesName $time linear forwards;
    -webkit-animation: $keyframesName $time linear forwards;
    -o-animation: $keyframesName $time linear forwards;
}
@mixin animationInfinite($keyframesName, $time: 1s) {
    animation: $keyframesName $time linear infinite;
    -moz-animation: $keyframesName $time linear infinite;
    -webkit-animation: $keyframesName $time linear infinite;
    -o-animation: $keyframesName $time linear infinite;
}

// 语音按钮放大背景动画
@keyframes voiceSearchBiggerA {
    0% {
        -webkit-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        transform: scale(1, 1);
        opacity: .2;
    }
    100% {
        -webkit-transform: scale(4, 4);
        -moz-transform: scale(4, 4);
        -ms-transform: scale(4, 4);
        -o-transform: scale(4, 4);
        transform: scale(4, 4);
        opacity: 0;
    }
}

@mixin btnBfAnimation {
    background-color: #ff6c00;
    border-radius: 100%;
    @include animationInfinite(voiceSearchBiggerA, 1.5s);
}
.btnBfAnimationA {
    @include btnBfAnimation;
}
.btnBfAnimationB {
    @include btnBfAnimation;
    animation-delay: 1s;
}

@keyframes voiceSearchScaleA {
    0% {
        height: 30px;
    }
    50% {
        height: 15px;
    }
    100% {
        height: 30px;
    }
}
@keyframes voiceSearchScaleB {
    0% {
        height: 15px;
    }
    50% {
        height: 30px;
    }
    100% {
        height: 15px;
    }
}

@mixin voiceSearchScale {
    width: 6px;
    background-color: #fff;
    border-radius: 6px;
}

.voiceSearchScaleBox {
    display: flex;
    margin: 0 auto;
    width: 35px !important;
    height: 30px !important;
    justify-content: space-between;
    align-items: center;

    .voiceSearchScaleLong {
        @include voiceSearchScale;
        @include animationInfinite(voiceSearchScaleA, 1.5s);
    }
    .voiceSearchScaleShort {
        @include voiceSearchScale;
        @include animationInfinite(voiceSearchScaleB, 1.5s);
    }
}
